import React, {PropTypes} from 'react';
import {Form, Input, Modal, DatePicker, Checkbox} from 'antd';
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};

const UserModal = ({
    visible,
    item = {},
    onOk,
    onCancel,
    form: {
        getFieldDecorator,
        validateFields,
        getFieldsValue,
        resetFields,
        getFieldValue
    },
}) => {
    function handleOk() {
        validateFields((errors) => {
            if (errors) {
                return;
            }
            const data = {...getFieldsValue()};
            onOk(data);
        });
    }

    function checkPassword(rule, value, callback) {
        if (value && value !== getFieldValue('password')) {
            callback('两次密码不匹配');
        }
        else{
            callback();
        }
    }

    function checkConfirm(rule, value, callback) {
        if (value) {
            if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/.test(value)) {
                callback('密码由数字和字母组成、至少8位');
            }
            else {
                validateFields(['confirm'], {force: true});
            }
        }
        callback();
    }

    function onModalCancel() {//关闭modal重置所有组件
        resetFields();
        onCancel();
    }

    const modalOpts = {
        title: '创建用户',
        visible,
        onOk: handleOk,
        onCancel: onModalCancel,
    };
    return (
        <Modal {...modalOpts}>
            <Form horizontal>
                <FormItem
                    label="姓名："
                    hasFeedback
                    {...formItemLayout}
                >
                    {getFieldDecorator('username', {
                        initialValue: item.username,
                        rules: [
                            {required: true, message: '姓名未填写'},
                        ],
                    })(
                        <Input type="text"/>
                    )}
                </FormItem>
                <FormItem
                    label="密码："
                    hasFeedback
                    {...formItemLayout}
                >
                    {getFieldDecorator('password', {
                        initialValue: item.password,
                        rules: [
                            {required: true, message: '密码未填写'},
                            {validator: checkConfirm},
                        ],
                    })(
                        <Input type="password"/>
                    )}
                </FormItem>
                <FormItem
                    label="确认密码："
                    hasFeedback
                    {...formItemLayout}
                >
                    {getFieldDecorator('confirm', {
                        initialValue: item.confirm,
                        rules: [
                            {required: true, message: '确认密码未填写'},
                            {validator: checkPassword},
                        ],
                    })(
                        <Input type="password"/>
                    )}
                </FormItem>
                <FormItem
                    label="邮箱："
                    hasFeedback
                    {...formItemLayout}
                >
                    {getFieldDecorator('email', {
                        initialValue: item.email,
                        rules: [
                            {type: 'email', message: '请输入正确格式email',}
                        ],
                    })(
                        <Input type="text"/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="员工状态"
                >
                    {getFieldDecorator('is_staff', {
                        valuePropName: 'checked',
                        initialValue: item.is_staff
                    })(
                        <Checkbox />
                    )}
                </FormItem>
            </Form>
        </Modal>
    );
};

UserModal.propTypes = {
    visible: PropTypes.any,
    form: PropTypes.object,
    item: PropTypes.object,
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
};

export default Form.create()(UserModal);
